/**
 * 响应式工具类
 * 注意：uni-app x 不支持 @media，H5 平台可以使用
 * App 平台需要通过 JS 动态设置样式或使用条件编译
 */

/* H5 平台响应式工具类 */
/* #ifdef H5 */
/* 移动端优先的响应式断点 */
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;

/* 响应式显示/隐藏 */
@media (max-width: $breakpoint-md - 1px) {
	.hidden-mobile {
		display: none !important;
	}
}

@media (min-width: $breakpoint-md) {
	.hidden-desktop {
		display: none !important;
	}
	
	.show-mobile {
		display: none !important;
	}
}

/* 响应式宽度（仅 H5） */
@media (min-width: $breakpoint-md) {
	.w-md-auto {
		width: auto;
	}
	
	.w-md-full {
		width: 100%;
	}
	
	@for $i from 1 through 1000 {
		.w-md-#{$i} {
			width: #{$i}px;
		}
	}
}

@media (min-width: $breakpoint-lg) {
	.w-lg-auto {
		width: auto;
	}
	
	.w-lg-full {
		width: 100%;
	}
	
	@for $i from 1 through 1000 {
		.w-lg-#{$i} {
			width: #{$i}px;
		}
	}
}

/* 响应式间距（仅 H5） */
@media (min-width: $breakpoint-md) {
	@for $i from 1 through 100 {
		.p-md-#{$i} {
			padding: #{$i}px;
		}
		.px-md-#{$i} {
			padding-left: #{$i}px;
			padding-right: #{$i}px;
		}
		.py-md-#{$i} {
			padding-top: #{$i}px;
			padding-bottom: #{$i}px;
		}
		.m-md-#{$i} {
			margin: #{$i}px;
		}
		.mx-md-#{$i} {
			margin-left: #{$i}px;
			margin-right: #{$i}px;
		}
		.my-md-#{$i} {
			margin-top: #{$i}px;
			margin-bottom: #{$i}px;
		}
	}
}

@media (min-width: $breakpoint-lg) {
	@for $i from 1 through 100 {
		.p-lg-#{$i} {
			padding: #{$i}px;
		}
		.px-lg-#{$i} {
			padding-left: #{$i}px;
			padding-right: #{$i}px;
		}
		.py-lg-#{$i} {
			padding-top: #{$i}px;
			padding-bottom: #{$i}px;
		}
		.m-lg-#{$i} {
			margin: #{$i}px;
		}
		.mx-lg-#{$i} {
			margin-left: #{$i}px;
			margin-right: #{$i}px;
		}
		.my-lg-#{$i} {
			margin-top: #{$i}px;
			margin-bottom: #{$i}px;
		}
	}
}
/* #endif */

/* 响应式 Mixin（用于在组件中自定义响应式样式） */
/* #ifdef H5 */
@mixin responsive($property, $mobile-value, $desktop-value) {
	#{$property}: $mobile-value;
	
	@media (min-width: $breakpoint-md) {
		#{$property}: $desktop-value;
	}
}

@mixin responsive-lg($property, $mobile-value, $desktop-value) {
	#{$property}: $mobile-value;
	
	@media (min-width: $breakpoint-lg) {
		#{$property}: $desktop-value;
	}
}

@mixin responsive-xl($property, $mobile-value, $desktop-value) {
	#{$property}: $mobile-value;
	
	@media (min-width: $breakpoint-xl) {
		#{$property}: $desktop-value;
	}
}

// 多断点响应式
@mixin responsive-multi($property, $mobile-value, $tablet-value, $desktop-value) {
	#{$property}: $mobile-value;
	
	@media (min-width: $breakpoint-md) {
		#{$property}: $tablet-value;
	}
	
	@media (min-width: $breakpoint-lg) {
		#{$property}: $desktop-value;
	}
}
/* #endif */

/* App 平台响应式工具类（通过条件编译实现） */
/* #ifndef H5 */
/* App 平台可以通过 JS 动态设置样式类来实现响应式 */
/* 建议在组件中使用 computed 属性根据屏幕宽度动态设置类名 */
/* #endif */

